<template>
  <div class="home-page">
  	<section>
      <div class="title">
        <h4><i></i>待办事项</h4>
        <router-link to="/backlog">More <i class="el-icon-d-arrow-right"></i></router-link>
      </div>
      <div class="text item">
        <el-table :data="todolistData" style="width: 100%" border stripe empty-text=" " v-loading="loadingT">
          <el-table-column prop="order_code" label="订单编号" show-overflow-tooltip>>
            <template slot-scope="scope">
              <router-link :to="{ path: 'initiatingprocess' + (!scope.row.flow_path ? '' : ('/' + scope.row.flow_path)), query: { isCreater: (scope.row.create_user_name != isC) ? 0 : 1, dTab: 1, formInstId: scope.row.id, formServiceName: scope.row.form_service_name, flowId: scope.row.flow_id, currNodeId: (!scope.row.curr_node_id ? 1 : scope.row.curr_node_id), itemStatus: 1 }}"><span>{{scope.row.order_code}}</span></router-link>
            </template>
          </el-table-column>
          <el-table-column prop="buyer_name" label="买家名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="flow_name" label="订单流程" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="arrival_time" label="到达时间">
            <template slot-scope="scope">
              <span>{{fmtDate(scope.row.arrival_time)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
  	</section>

  	<section>
      <div class="title">
        <h4><i></i>已办事项</h4>
        <router-link to="/runmatters">More <i class="el-icon-d-arrow-right"></i></router-link>
      </div>
      <div class="text item">
        <el-table :data="hivedolistData" style="width: 100%" border stripe empty-text=" " v-loading="loadingH">
          <el-table-column prop="orderCode" label="订单编号" show-overflow-tooltip>
            <template slot-scope="scope">
              <router-link :to="{ path: 'initiatingprocess' + (!scope.row.flowPath ? '' : ('/' + scope.row.flowPath)), query: { isCreater: (scope.row.createUserName != isC) ? 0 : 1, isHive: 1, dTab: 1, formInstId: scope.row.formInstId, formServiceName: scope.row.formServiceName, flowId: scope.row.flowId, currNodeId: (!scope.row.currNodeId ? 1 : scope.row.currNodeId), itemStatus: 2 }}"><span>{{scope.row.orderCode}}</span></router-link>
            </template>
          </el-table-column>
          <el-table-column prop="buyerName" label="买家名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="flowName" label="订单流程" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="finishTime" label="发送时间">
            <template slot-scope="scope">
              <span>{{fmtDate(scope.row.finishTime)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
  	</section>

  </div>
</template>

<script>
  import {todoList, hivedoList} from '@/server/home'
  import {getStore} from '@/assets/js/common'

  export default {
    data() {
      return {
        todolistData: [],
        hivedolistData: [],
        isC: '',
        loadingT: true,
        loadingH: true
      };
    },
    mounted(){

      let userMsgObj = JSON.parse(getStore('userMsg'));
      this.isC = userMsgObj.userName;
      // this.userId = userMsgObj.id;

      let paramObj = {
        currPage: 0,
        pageSize: 10,
        userId: userMsgObj.id
        // sort: 'desc'
      }
      this.getTodoData(paramObj);
      this.getHivedoData(paramObj);

    },
    methods: {
      fmtDate(obj) {
          var date =  new Date(obj);
          var y = 1900 + date.getYear();
          var m = "0" + (date.getMonth()+1);
          var d = "0" + date.getDate();
          return y + "/" + m.substring(m.length - 2, m.length) + "/" + d.substring(d.length - 2 ,d.length);
      },
      getTodoData (paramObj) {

        todoList(paramObj).then((res) => {

          let _this = this;
          setTimeout(()=> {
            _this.loadingT = false;

            if (res.code) {
             let sData = res.data.datas;
             _this.todolistData = sData;
            } else {
             _this.$message(res.message);
            }
          }, 500)

        })
      },
      getHivedoData (paramObj) {

        hivedoList(paramObj).then((res) => {

          let _this = this;
          setTimeout(()=> {
            _this.loadingH = false;

            if (res.code) {
             let sData = res.data.datas;
             _this.hivedolistData = sData;
            } else {
             _this.$message(res.message);
            }
          }, 500)

        })
      }
    }
  };
</script>

<style lang="sass">
  .home-page
    background: #fff
    display: flex
    padding: 20px
    .el-table__body-wrapper
      overflow: hidden
    section
      flex: 1
      display: inline-block
      min-width: 46%
      margin: 0 1%
      border-top: none !important
      .title
        line-height: 50px
        color: #fff
        background: #37AEE0
        position: relative
        h4
          height: 50px
          font-family: PingFangSC-Medium
          font-size: 18px
          display: inline-block
          color: #FFFFFF
          text-indent: 20px
          i
            display: inline-block
            vertical-align: middle
            margin-right: 6px
            background-size: 100% 100% !important
        a
          position: absolute
          top: 1px
          right: 0
          padding: 0 20px
          color: #fff
          transition: all .6s
          display: inline-block
          i
            vertical-align: middle
            transition: all .6
            opacity: 0
          &:hover
            transform: translateX(10px)
            i
              opacity: 1
      &:first-child
        border: 2px solid #37AEE0
        .title
          background: #37AEE0
          h4
            i
              width: 18px
              height: 20px
              background: url('icon/icon_daiban@2x.png')
      &:last-child
        border: 2px solid #E06937
        .title
          background: #E06937
          h4
            i
              width: 21px
              height: 18px
              background: url('icon/icon_yiban@2x.png')
      ul
        transition: all .6s
        &:hover
          background: #f8f8f8
          a
            color: #333
        a
          color: #666
        li
          line-height: 40px
          padding-left: 30px
          border-bottom: 1px solid #ccc
</style>
